<template>
	<view class="container">
		<view class="tui-page-title" @tap="doc">
			<image src="/static/images/extend/logo.png" class="tui-logo"></image>
		</view>
		<view class="tui-page-desc">
			<text>以下是对小程序</text>
			<text class="tui-link" @tap="openThorUI">ThorUI组件库</text>
			<text>的扩展补充，组件参数属性详见</text>
			<text class="tui-link" @tap="doc">ThorUI文档</text>
		</view>
		<view class="tui-main-box">
			<view class="tui-collapse-item" v-for="(item, index) in menuList" :key="index">
				<tui-collapse @click="change" :arrow="false" :index="index" :current="current"
					:height="item.height + 'rpx'">
					<template v-slot:title>
						<view class="tui-menu-item" :class="[current == index ? 'tui-opcity' : '']">
							<view class="tui-menu-title">{{ item.name }}</view>
							<image :src="'/static/images/extend/' + item.id + '.png'" class="tui-menu-ic"></image>
						</view>
					</template>
					<template v-slot:content>
						<navigator hover-class="none" v-for="(page, subIndex) in item.pages" :key="subIndex"
							:url="page.page">
							<tui-list-cell padding="0" arrow :unlined="subIndex === item.pages.length - 1">
								<view class="tui-menu-list">{{ page.name }}</view>
							</tui-list-cell>
						</navigator>
					</template>
				</tui-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				menuList: [],
				listOnline: [{
						id: 'icon_nav_form',
						name: '表单组件',
						height: 900,
						pages: [{
							name: 'Button按钮',
							page: '/pages/component/form-button/form-button'
						}, {
							name: 'input 输入框',
							page: '/pages/component/input/input'
						}, {
							name: 'textarea 多行输入框',
							page: '/pages/component/textarea/textarea'
						}, {
							name: 'label 标签',
							page: '/pages/component/label/label'
						}, {
							name: 'radio 单选',
							page: '/pages/component/radio/radio'
						}, {
							name: 'checkbox 复选',
							page: '/pages/component/checkbox/checkbox'
						}, {
							name: 'switch 开关',
							page: '/pages/component/switch/switch'
						}, {
							name: 'picker 选择器',
							page: '/pages/component/picker/picker'
						}, {
							name: 'form 表单验证',
							page: '/pages/component/form/form'
						}]
					}, {
						id: 'icon_nav_widget',
						name: '基础组件',
						height: 700,
						pages: [{
								name: 'slide-view',
								page: '/pages/extend/slide-view/slide-view'
							},
							{
								name: 'gallery',
								page: '/pages/extend/gallery/gallery'
							},
							{
								name: 'loading',
								page: '/pages/extend/loading/loading'
							},
							{
								name: 'panel',
								page: '/pages/extend/panel/panel'
							},
							{
								name: 'preview',
								page: '/pages/extend/preview/preview'
							},
							{
								name: 'scale',
								page: '/pages/extend/scale/scale'
							},
							{
								name: 'form',
								page: '/pages/extend/form/form'
							}
						]
					},
					{
						id: 'icon_nav_feedback',
						name: '操作反馈',
						height: 300,
						pages: [{
								name: 'dialog 对话框',
								page: '/pages/extend/dialog/dialog'
							},
							{
								name: 'msg 提示页',
								page: '/pages/extend/msg/msg'
							},
							{
								name: 'landscape 压屏窗',
								page: '/pages/component/landscape/landscape'
							}
						]
					},
					{
						id: 'icon_nav_3x',
						name: '导航相关',
						height: 400,
						pages: [{
								name: 'tab标签页',
								page: '/pages/extend/tab/tab'
							},
							{
								name: 'Pagination 分页器',
								page: '/pages/component/pagination/pagination'
							},
							{
								name: 'SegmentedControl 分段器',
								page: '/pages/component/segmented-control/segmented-control'
							},
							{
								name: 'NoticeBar 通告栏',
								page: '/pages/component/notice-bar/notice-bar'
							}
						]
					},
					{
						id: 'icon_nav_search',
						name: '搜索相关',
						height: 100,
						pages: [{
							name: 'searchbar',
							page: '/pages/extend/searchbar/searchbar'
						}]
					},
					{
						id: 'icon_nav_chart',
						name: 'Chart图表',
						height: 100,
						pages: [{
							name: 'chart',
							page: '/pages/extend/chart/chart'
						}]
					},
					{
						id: 'icon_nav_extend',
						name: '扩展组件',
						height: 2200,
						pages: [{
								name: '长按复制',
								page: '/pages/extend/copy/copy'
							},
							{
								name: '贝塞尔曲线 cubic-bezier',
								page: '/pages/extend/cubic-bezier/cubic-bezier'
							},
							{
								name: '图片裁剪（App端使用5+ api裁剪）',
								page: '/pages/extend/cropper/cropper'
							},
							{
								name: '图片裁剪（圆形裁剪框）',
								page: '/pages/extend/cropper-round/cropper-round'
							},
							{
								name: '拖拽排序 drag',
								page: '/pages/extend/drag/drag'
							},
							{
								name: '滑动验证码',
								page: '/pages/extend/slide-verify/slide-verify'
							},
							{
								name: '数字键盘',
								page: '/pages/extend/digital-keyboard/digital-keyboard'
							},
							{
								name: '数字滚动',
								page: '/pages/extend/digital-roller/digital-roller'
							},
							{
								name: 'popup弹层动画',
								page: '/pages/extend/popup/popup'
							},
							{
								name: '计时器',
								page: '/pages/extend/timer/timer'
							},
							{
								name: 'table表格',
								page: '/pages/extend/table/table'
							},
							{
								name: 'grade评分',
								page: '/pages/extend/grade/grade'
							},
							{
								name: '短信验证码倒计时',
								page: '/pages/extend/countdown-verify/countdown-verify'
							},
							{
								name: '滑动选择器',
								page: '/pages/extend/slider/slider'
							},
							{
								name: '旋转图片验证',
								page: '/pages/extend/rotate-verify/rotate-verify'
							},
							{
								name: '瀑布流',
								page: '/pages/extend/waterfall/waterfall'
							},
							{
								name: '刻度尺滚动选择器',
								page: '/pages/extend/aScale/aScale'
							},
							{
								name: '图片懒加载',
								page: '/pages/extend/lazyload/lazyload'
							},
							{
								name: '内容超出隐藏',
								page: '/pages/extend/overflow-hidden/overflow-hidden'
							},
							{
								name: '组织架构树',
								page: '/pages/extend/org-tree/org-tree'
							},
							{
								name: 'Alert 警告框',
								page: '/pages/component/alert/alert'
							},
							{
								name: 'Treeview 树型菜单',
								page: '/pages/component/treeview/treeview'
							}
						]
					},
					{
						id: 'icon_nav_adaptive',
						name: '多端适配（栅格化布局）',
						height: 600,
						pages: [{
								name: 'layout 布局',
								page: '/pages/component/layout/layout'
							}, {
								name: '左右伸缩',
								page: '/pages/extend/telescopic/telescopic'
							},
							{
								name: '换行排列',
								page: '/pages/extend/linewrap/linewrap'
							},
							{
								name: '分页展现',
								page: '/pages/extend/pagination/pagination'
							},
							{
								name: '分层展现',
								page: '/pages/extend/layered/layered'
							},
							{
								name: '横向扩展',
								page: '/pages/extend/horizontal/horizontal'
							}
						]
					}, {
						id: 'icon_nav_js',
						name: 'JavaScript',
						height: 300,
						pages: [{
							name: 'Utils 工具类',
							page: '/pages/extend/utils/utils'
						}, {
							name: 'Validation 表单验证',
							page: '/pages/component/form-js/form-js'
						}, {
							name: 'Request 网络请求',
							page: '/pages/component/request/request'
						}]
					},
					{
						id: 'icon_nav_template',
						name: '模板',
						height: 500,
						pages: [{
								name: '签到模板',
								page: '/pages/template/signIn/index/index'
							},
							{
								name: '咖啡点单',
								page: '/pages/template/cafe/menu/menu'
							},
							{
								name: '点餐模板',
								page: '/pages/my/tips/tips'
							},
							{
								name: '短视频模板',
								page: '/pages/my/tips/tips'
							},
							{
								name: '付费成品',
								page: '/pages/my/product/product'
							}
						]
					}
				],
				current: -1,
				value: 1,
				sweixin: null
			};
		},
		computed: mapState(['isOnline']),
		onLoad() {
			this.menuHandle();
			// #ifdef APP-PLUS
			plus.share.getServices(s => {
				for (let item of s) {
					if (item.id == 'weixin') {
						this.sweixin = item;
					}
				}
			});
			// #endif
		},
		watch: {
			isOnline(val) {
				if (val) {
					this.menuHandle();
				}
			}
		},
		methods: {
			...mapActions(['getOnlineStatus']),
			async menuHandle() {
				let list = [...this.listOnline];
				let menuList = list.splice(0, 9);
				let isOnline = await this.getOnlineStatus();
				if (isOnline) {
					menuList = this.listOnline;
				}
				this.menuList = menuList;
			},
			change(e) {
				this.current = this.current == e.index ? -1 : e.index;
			},
			openThorUI() {
				// #ifdef MP-WEIXIN
				wx.navigateToMiniProgram({
					appId: 'wxb6a98ca343f57a38'
				});
				// #endif

				// #ifndef  MP-WEIXIN
				if (this.sweixin) {
					this.sweixin.launchMiniProgram({
						id: 'gh_0c07a8c02dac'
					});
				} else {
					uni.previewImage({
						urls: ['https://thorui.cn/img/applets.jpg']
					});
				}
				// #endif
			},
			doc() {
				this.tui.href('/pages/my/doc/doc');
			}
		},
		onShareAppMessage: function(e) {
			return {
				title: 'ThorUI示例'
			};
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		padding-bottom: 30rpx;

		.tui-page-title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 70rpx 0 30rpx 0;

			.tui-logo {
				height: 88rpx;
				width: 88rpx;
				border-radius: 4rpx;
			}
		}

		.tui-page-desc {
			width: 100%;
			font-size: $uni-font-size-base;
			color: $uni-text-color-gray;
			text-align: center;
			padding: 0 80rpx;
			box-sizing: border-box;

			.tui-link {
				color: $uni-color-link;
			}
		}

		.tui-main-box {
			width: 100%;
			padding: 50rpx $uni-spacing-row-lg 0;
			box-sizing: border-box;

			.tui-collapse-item {
				margin-bottom: 24rpx;
				border-radius: 6rpx;
				overflow: hidden;
				box-shadow: 0 15rpx 10rpx -15rpx #efefef;
			}

			.tui-menu-item {
				width: 100%;
				padding: $uni-spacing-row-lg;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				transition: all 0.15s;

				.tui-menu-ic {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.tui-opcity {
				opacity: 0.4;
			}

			.tui-menu-list {
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				font-size: $uni-font-size-lg;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}
		}
	}
</style>
